<template>
  <div class="main-box">
    <div class="main-box-tab">
      <div style="float: left" class="iconposition">
        <a-button
          size="small"
          type="primary"
          ghost
          style="height: 135px; width: 20px"
          @click="previous"
          :disabled="leftDisabled"
          :style="{
            color: `${iconType == 'ai' && !leftDisabled ? '#e99220' : ''}`,
            borderColor: `${iconType == 'ai' && !leftDisabled ? '#e99220' : ''}`,
          }"
        >
          <template #icon>
            <left-outlined />
          </template>
        </a-button>
      </div>
      <div style="float: right" class="iconposition">
        <a-button
          size="small"
          type="primary"
          ghost
          style="height: 135px; width: 20px"
          @click="next"
          :disabled="rightDisabled"
          :style="{
            color: `${iconType == 'ai' && !rightDisabled ? '#e99220' : ''}`,
            borderColor: `${iconType == 'ai' && !rightDisabled ? '#e99220' : ''}`,
          }"
        >
          <template #icon style="position: absolute; left: 2px; top: 45px">
            <right-outlined />
          </template>
        </a-button>
      </div>
      <div class="main-box-tab-content" ref="tabs">
        <div class="main-box-tab-roll">
          <div style="height: 100%">
            <slot name="content"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch, reactive } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    iconType: {
      type: String,
      default: 'ct',
    },
  },
  components: {
    RightOutlined,
    LeftOutlined,
  },
  setup(props) {
    const tabsData = ref<any>([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
    const moveX = ref<any>(0);
    const count = ref<any>(1);
    const width = ref<any>(0);
    const unoccupied = ref<any>(0);
    const tabsCount = ref<any>(0);
    const leftDisabled = ref<boolean>(false);
    const rightDisabled = ref<boolean>(false);
    const tabs = ref<any | HTMLInputElement>(null);
    // const tabs = document.getElementsByClassName('main-box-tab-content');
    const translateX = x => {
      if (tabs.value) {
        moveX.value = x < 0 ? 0 : x;
        tabs.value.children[0].style.transform = `translateX(-${moveX.value}px)`;
      }
    };
    const next = () => {
      // 计算出总长度
      let totalWidth = width.value * tabsData.value.length;
      console.log(' ', totalWidth);
      // 可视区域 < 滚动区域（滚动区域大于可视区域才可以移动）
      // 移动距离 + 可视区域 = 滚动区域的宽度（上一次的宽度，当点击时才是实际宽度）< 滚动区域
      if (
        tabs.value.clientWidth < totalWidth &&
        moveX.value + tabs.value.clientWidth < totalWidth
      ) {
        //moveX为0减去空余空间的宽度
        moveX.value += tabs.value.clientWidth - unoccupied.value;
        translateX(moveX.value);
        console.log(moveX.value + tabs.value.clientWidth);
        if (moveX.value + tabs.value.clientWidth >= totalWidth) {
          rightDisabled.value = true;
        } else {
          rightDisabled.value = false;
        }
      }
      leftDisabled.value = false;
    };
    const previous = () => {
      if (moveX.value > 0) {
        moveX.value -= tabs.value.clientWidth - unoccupied.value;
        translateX(moveX.value);
        console.log(moveX.value);
        if (moveX.value) {
          leftDisabled.value = false;
        } else {
          leftDisabled.value = true;
        }
        rightDisabled.value = false;
      }
    };
    watch(
      () => props.data,
      () => {
        tabsData.value = props.data;
        console.log(width.value * tabsData.value.length);
        if (tabs.value) {
          let getStyle = getComputedStyle(tabs.value.children[0].children[0], null);
          let marginLeft = parseFloat(
            getStyle.marginLeft.substr(0, getStyle.marginLeft.length - 2),
          );
          let marginRight = parseFloat(
            getStyle.marginRight.substr(0, getStyle.marginRight.length - 2),
          );
          // 元素实际宽度 = 元素的宽度 + 外边距
          // width.value = marginLeft + marginRight + tabs.value.children[0].children[0].offsetWidth;
          width.value = marginLeft + marginRight + 203;
          unoccupied.value = tabs.value.offsetWidth % width.value;
          console.log(width.value * tabsData.value.length, tabs.value.clientWidth);
          if (width.value * tabsData.value.length < tabs.value.clientWidth) {
            leftDisabled.value = true;
            rightDisabled.value = true;
          } else {
            leftDisabled.value = true;
            rightDisabled.value = false;
          }
          // console.log(
          //   'width',
          //   unoccupied.value,
          //   width.value,
          //   tabs.value.children[0].children[0].children,
          // );
          // 转为整数
          // tabsCount.value = parseInt(tabs.value.offsetWidth / width.value);
        }
      },
    );
    onMounted(() => {
      //   if (tabs.value) {
      //     let getStyle = getComputedStyle(tabs.value.children[0].children[0], null);
      //     let marginLeft = parseFloat(getStyle.marginLeft.substr(0, getStyle.marginLeft.length - 2));
      //     let marginRight = parseFloat(
      //       getStyle.marginRight.substr(0, getStyle.marginRight.length - 2),
      //     );
      //     // 元素实际宽度 = 元素的宽度 + 外边距
      //     // width.value = marginLeft + marginRight + tabs.value.children[0].children[0].offsetWidth;
      //     width.value = marginLeft + marginRight + 180;
      //     unoccupied.value = tabs.value.offsetWidth % width.value;
      //     console.log(width.value * tabsData.value.length, tabs.value.clientWidth);
      //     // console.log(
      //     //   'width',
      //     //   unoccupied.value,
      //     //   width.value,
      //     //   tabs.value.children[0].children[0].children,
      //     // );
      //     // 转为整数
      //     // tabsCount.value = parseInt(tabs.value.offsetWidth / width.value);
      //   }
    });
    return {
      tabsData,
      moveX,
      count,
      width,
      unoccupied,
      tabsCount,
      tabs,
      translateX,
      next,
      previous,
      leftDisabled,
      rightDisabled,
    };
  },
});
</script>

<style lang="less" scoped>
.main-box {
  width: 100%;
  height: 155px;
}

.main-box-tab {
  position: relative;
  height: 100%;
  padding: 10px 10px;
  overflow: hidden;
}
.main-box-tab > i {
  position: absolute;
  bottom: 15px;
  cursor: pointer;
}
.left {
  left: 0;
}

.right {
  right: 0;
}

.main-box-tab-content {
  height: 100%;
  overflow: hidden;
}
.main-box-tab-roll {
  display: flex;
  align-items: center;
  height: 100%;
  transition: transform 0.5s;
}
.main-box-tab-roll div {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: 130px;
  margin: 0 5px;
  cursor: pointer;
}
.tab-item {
  color: #cccccc;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #052141;
  border-radius: 0 1px 0 1px;
}

.tab-item-action {
  color: #ffffff;
  background: rgba(0, 180, 255, 0.8);
  border: 1px solid #1e2088;
  border-radius: 0 1px 0 1px;
}
:deep(.ant-card-head) {
  min-height: 33px;
  padding: 0;
  text-align: center;
  background: #194295;
}
.iconposition {
  height: 100%;
}
</style>
